<template>
    <div class="administer">
        <div class="administerNav">
            <backHeader></backHeader>
        </div>
        <div class="administerCont">
            <div class="maintenance html_pst">
                <div class="ctp">
                    <div class="back" @click="goback()"><img src="@/assets/images/bb7.jpg" alt=""></div>
                    <div class="name">品牌名称：{{seriesInfo.brandName}}</div>
                    <div class="name">系列名称：{{seriesInfo.seriesName}}</div>
                </div>
                <div class="release">
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item label="灯具型号：" class="witd wid150">
                            <el-autocomplete
                                class="inline-input"
                                v-model="request.modelNameLike"
                                :fetch-suggestions="querySearch"
                                placeholder="请输入内容"
                                :trigger-on-focus="false"
                                @select="handleSelect"
                            ></el-autocomplete>
                        </el-form-item>
                        <el-form-item label="灯具类型：" class="witd wid150">
                            <el-select v-model="request.lumType">
                                <el-option label="全部" value=""></el-option>
                                <el-option v-for="item in lampTypeList" :key="item.id" :label="item.lampName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="功率(W)：" class="power atuo">
                            <el-input v-model="request.lumPowerMin"></el-input>-
                            <el-input v-model="request.lumPowerMax"></el-input>
                        </el-form-item>
                        <el-form-item label="色温色彩：" class="witd wid150">
                            <el-select v-model="request.colorFlagId">
                                <el-option label="全部" value=""></el-option>
                                <el-option v-for="item in colorFlagList" :key="item.id" :label="item.dictCont" :value="item.id" v-html="item.dictCont"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="光束角(°)：" class="power atuo">
                            <el-input v-model="request.lightAngleMin"></el-input>-
                            <el-input v-model="request.lightAngleMax"></el-input>
                        </el-form-item>
                        <el-form-item label="控制方式：" class="witd wid150">
                                <el-popover ref="popover6" placement="bottom" width="60" trigger="focus" popper-class="acves">
                                     <ul class="wid100">
                                        <li v-for="(item, index) in kongzhifangshiList"
                                            style="cursor: pointer;"
                                            :data-index="index"
                                            @click="setcontrolTypeStrLike(item)"
                                            :key="index">
                                            {{item.dictCont}}
                                        </li>
                                    </ul>
                                </el-popover>
                                <el-input v-model="request.controlTypeStrLike" v-popover:popover6 ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search(1)">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="maintenance2">
                    <div class="zkbtn">
                        <span class="btn" @click="handleAdd()" style="cursor:pointer"><i class="el-icon-circle-plus-outline"></i>添加</span>
                        <span  class="btn" @click="handleEdit()" style="cursor:pointer"><img src="@/assets/images/bb3.jpg"  alt="">修改</span> 
                        <span class="btn"  @click="handleDelete()" style="cursor:pointer"><img src="@/assets/images/bb4.jpg" alt="">删除</span>
                        <span class="list_S"><el-button slot="reference" @click="showSetDiv()"><img src="@/assets/images/icon9_27.png" alt="">列表显示项</el-button></span>
                    </div>
                     
                    <el-table :data="tableData" border style="width: 100%" :max-height="tableHeight_s" @selection-change="handleSelectionChange">
                    <el-table-column  type="selection"  width="100"> </el-table-column>
                        <el-table-column v-for="(item) in showHideList" v-if="item.isDefault" :key="Math.random()" :prop="item.attrIndex" :label="item.attrName">
                            <template slot-scope="scope">
                                <template v-if="item.valType == 'image'">
                                    <img @click.stop="viewPicture(ImgPath+scope.row[item.attrIndex])" v-if="scope.row[item.attrIndex] != null && scope.row[item.attrIndex] != ''" :src="ImgPath + scope.row[item.attrIndex]"  width="100" height="100" />
                                </template>
                                <a target="_blank" :href="ImgPath + scope.row[item.attrIndex]"  v-else-if="item.valType == 'file'"> <i  class="avatar-uploader-icon el-icon-notebook-2"></i></a>
                                <span v-else-if="item.attrName == '效果描述' || item.attrName == '产品标签'">
                                     <el-popover placement="top" trigger="hover" width="400">
                                       {{(scope.row[item.attrIndex])}}
                                        <div slot="reference"><span id="wenzi2">{{getSubStr(scope.row[item.attrIndex])}}</span></div>
                                    </el-popover>
                                    <!-- <span :alt="scope.row[item.attrIndex]">{{getSubStr(scope.row[item.attrIndex])}}</span> -->
                                </span>
                                <span v-else>{{scope.row[item.attrIndex]}}</span>
                            </template>
                        </el-table-column>
                        <!--<el-table-column  label="操作" fixed="right" width="120">
                             <template slot-scope="scope">
                                 <div class="operation">
                                     <el-button
                                size="mini"
                                class="editor table_editor "
                                @click="handleEdit(scope.row)">修改</el-button>
                                <el-button
                                size="mini"
                                type="danger"
                                class="delete table_editor"
                                @click="handleDelete(scope.row)">删除</el-button>
                                </div>
                            </template>
                        </el-table-column>-->
                    </el-table> 
                    <div style="padding:10px;text-align:center">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="request.page"
                            :page-sizes="[20, 50, 100, 200]"
                            :page-size="20"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalCount">
                        </el-pagination>
                    </div>

                    
                </div>
            </div>
        </div>
    
    <el-dialog
      :visible.sync="showListShowHideSetDiv"
      v-dialogDrag
      title="列表显示项"
      custom-class="dynamic-class list_SAS list_SASes">
      <div class="contcheck">
        <el-form>
          <el-form-item>
            <div class="cont">
              <div class="conts">
                <div style="cursor:pointer" v-for="(item,index) in showHideList" 
                  :key="index"
                  @click="changeColumn(index,item)" class="li_list">
                  <input type="checkbox" :id="'checkbox_'+index" :checked="item.isDefault ? 'checked' : ''" /><span>{{item.attrName}}</span>
                </div>
              </div>
            </div>
            <div style="clear:both" class="btn">
              <el-button
                style="width:100px;padding:10px"
                type="primary"
                @click="showListShowHideSetDiv = false"
              >确定</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
     <!--查看图片 -->
    <el-dialog :visible.sync="showPic" v-dialogDrag custom-class="imgsAMG dee">
      <span>
        <img :src="showPicUrl" />
      </span>
    </el-dialog>
    </div>
</template>
<script>
import backHeader from '@/views/common/backHeader.vue'
export default {
    data(){
        return{
            kongzhifangshiList:[],
            showHideList:[
                {
                    isDefault:true,
                    attrIndex:"waiGuanPic",
                    attrName:"灯具外观图",
                    valType:'image'
                },
                {
                    isDefault:true,
                    attrIndex:"brandName",
                    attrName:"品牌",
                },
                {
                    isDefault:true,
                    attrIndex:"modelName",
                    attrName:"灯具型号",
                },
                {
                    isDefault:true,
                    attrIndex:'lumPower',
                    attrName:'功率',
                },
                {
                    isDefault:true,
                    attrIndex:'colorTemp',
                    attrName:'色温色彩',
                },
                {
                    isDefault:true,
                    attrIndex:'lightAngle',
                    attrName:'光束角',
                },
                {
                    isDefault:true,
                    attrIndex:'guangTongLiang',
                    attrName:'光通量',
                },
                {
                    isDefault:true,
                    attrIndex:'controlType',
                    attrName:'控制方式',
                },
                {
                    isDefault:true,
                    attrIndex:'referPrice',
                    attrName:'参考价',
                }
            ],
            showShowHideButton:false,
            showListShowHideSetDiv: false,
            modelList:[],
            seriesInfo:{},
            lampTypeList:[],
            request:{
                colorFlagId:'',
                controlTypeStrLike:'',
                page:1,
                seriesId:this.$route.query.id,
                rows:20
            },
            colorFlagList:[],
            tableData:[
            ],
            totalCount:0,
            tableHeight_s:200,
            multipleSelection:[],
            
      showPic: false, //查看图片
      showPicUrl: "", //图片地址
        }
    },
    watch:{
        // "request.lumType":function(val){
        //     if(val == ''){
        //         this.showShowHideButton = false
        //     }else{
        //         this.searchShowHideList();
        //         this.showShowHideButton = true
        //     }
        // }
    },
    methods:{
            getSubStr(val){
                var str = val
                if(val.length > 30){
                    str = val.substring(0,30)+"..."
                }
                return str
            },
        setcontrolTypeStrLike(item){
            this.request.controlTypeStrLike = item.dictCont
            this.$refs.popover6.doClose()
        },
        goback(){
            this.$router.push({path:'/product'})
        },
        viewPicture(url){
            this.showPic = true
            this.showPicUrl = url
        },
    loadShowHideList(){
        let self = this
        this.$http.get('/api/stlamps/attributes',{},function(res){
            if(res.success){
                self.showHideList = res.data
            }
        })
    },
        changeColumn(index,item){
          item.isDefault = !item.isDefault;
        },
        searchShowHideList(){
            let self = this
            if(this.request.lumType != null && this.request.lumType != ''){
                this.$http.get('/api/stlamps/attributes/'+this.request.lumType,{},function(res){
                    if(res.success){
                        self.showHideList = res.data
                    }
                })
            }
        },
        showSetDiv() {
            this.showListShowHideSetDiv = true;
        },
        handleSelect(item) {
            console.log(item);
        },
        querySearch(queryString, cb) {
            let self = this
            var id = this.$route.query.id
            var temp = []
             this.$http.postObj('/api/model/json',{seriesId:id,modelName:queryString},function(res){
                if(res.success){
                    self.modelList = res.data
                    for(var i = 0;i<res.data.length;i++){
                        temp.push({
                            value:res.data[i].modelName,
                            modelId:res.data[i].id
                        })
                    }
                    cb(temp);
                }
            })
        },
        search(page){
            this.request.page = page
            let self = this
            this.$http.postQueryObj('/api/stlamps/pageJson',{isOrgState:true},this.request,function(res){
                if(res.success){
                    self.tableData = res.data.rows
                    self.totalCount = res.data.total
                }
            })
        },
        handleSizeChange(pageSize){
            this.request.rows = pageSize
            this.search(1)
        },
        handleCurrentChange(page) {
            this.search(page)
        },
        handleAdd(){
            this.$router.push('/productInformation?seriesId='+this.request.seriesId+'&type=update&lumTypeId='+this.seriesInfo.lumType+"&request="+JSON.stringify(this.request));
        },
        handleEdit(){
            if(this.multipleSelection.length == 0){
                this.$message.error('请选择数据')
                return false
            }
            if(this.multipleSelection.length > 1){
                this.$message.error('只能选择一条')
                return false
            }
            
            this.$router.push("/productInformation?seriesId="+this.request.seriesId +"&id="+this.multipleSelection[0].id+"&type=update&request="+JSON.stringify(this.request));
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleDelete(){
            if(this.multipleSelection.length == 0){
                this.$message.error('请选择数据')
                return false
            }
            var ids = ''
            for(var i = 0;i<this.multipleSelection.length;i++){
                ids += this.multipleSelection[i].id + ','
            }
            ids = ids.substr(0,ids.length-1)
            
            this.$confirm('您确定要删除吗?','提示',{
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                let self = this;
                this.$http.postQuery("/api/stlamps/batchDelete", {ids:ids}, function(res) {
                if (res.success) {
                    self.$message({
                    message: "删除成功！",
                    type: "success"
                    });
                }else{
                    self.$message.error(res.data)
                }
                self.search(1);
                });
            }).catch(()=>{});
        }
    },
    components: {
        backHeader
    },
    created(){
        var id = this.$route.query.id
        let self = this
        this.$http.get('/api/series/'+id,{},function(res){
            if(res.success){
                self.seriesInfo = res.data
            }
        })
       
            //加载灯具类型
            this.$http.get("/api/lampTypes/json", {}, function(res) {
                if (res.success) {
                    self.lampTypeList = res.data;
                }
            });

            //加载色温色彩
            this.$http.get("/api/banner/dicts/dictTypeAllList", {indexPinyin:"chanpinsewenyanse"}, function(res) {
                if (res.success) {
                    self.colorFlagList = res.data;
                }
            });
            
            
            //控制方式：
            this.$http.get("/api/dictTypeAllList", {indexPinyin:'chanpinkexuankongzhifangshi'}, function(res) {
                if (res.success) {
                    self.kongzhifangshiList = res.data;
                }
            });
        var request = this.$route.query.request
        if(request != null){
        this.request = JSON.parse(request)
        }
            this.search(1)
    this.loadShowHideList()
    },
    mounted(){
        this.$nextTick(function () {
            this.tableHeight_s = window.innerHeight - 340;
            
            // 监听窗口大小变化
            let self = this;
            window.onresize = function() {
                self.tableHeight_s = window.innerHeight - 340
            }
        })
  }
}
</script>
<style lang="scss">
.list_SASes{
    .el-dialog__header{
        background: #5a63a3;
        min-height: 60px;
        .el-dialog__title{
            color: #fff;
        }
    }
    .el-dialog__body{
        .btn{
            text-align: center;
            button{
                    background-color: #5b65a1;
                    border-radius: 4px;
                border: none;
            }
        }
    }
}
.li_list{
             width: 25%;
            float: left;
            margin-right: 0;
            input{
              position: relative;
              top: 2px;
              margin-right: 3px;
            }
}
.maintenance2 .editor {
    background: none;
    border: none;
    padding: 0;
    color: #0070ed;
    font-size: 14px;
    margin-right:10px;
}
.maintenance2 .delete {
    background: none;
    border: none;
    padding: 0;
    color: #d80000;
    font-size: 14px;
}
.release{
 .witd{
     .el-form-item__content{
         width: 150px;
     }
     
 }
  .el-button--primary {
    background-color: #5b65a1;
    border-radius: 4px;
    border: none;
}
}
.maintenance{
    .ctp{
        overflow: hidden;
        margin-bottom: 20px;
        .back{
            float: left;
            cursor: pointer;
            img{
                height: 22px;
            }
        }
        .name{
            margin-left: 15px;
            float: left;
        }
    }
}
.maintenance2{
    .zkbtn{
        margin-bottom: 12px;
        text-align: right;
        .btn{
            border: none;
            margin-right:12px;
            padding: 0;
            img{
                display: inline-block;
                height: 15px;
                margin-right: 4px;
                position: relative;
                top: 2px;
            }
             a{
            display: inline-block;
            // padding: 5px 15px;
            // border: 1px solid #ccc;
            border-radius: 4px;
            line-height: 1;
            
            }
        }
        .list_S{
            margin-left: 10px;
            .el-button{
                padding: 0;
                border: none;
                img{
                    display: inline-block;
                    height: 15px;
                    top:2px;
                    left: 0;
                    position: relative;
                }
            }
        }

    }
    td:last-child,th:last-child{
         border-left: 2px solid #d3dde2;
    }
    .operation{
        span:first-child{
            margin-right: 12px;
        }
        span{
            cursor: pointer;
            &:hover{
                color: #5b65a1;
            }
        }
        .el-button{
            text-align: center;
            position: relative;
            right: 0;
            span{
                margin-right: 0;
            }
        }
        .el-button+.el-button{
            margin-left: 0;
            margin-top: 5px;
        }
    }
}
</style>